<template>
	<div class="syslogIndexContent">
		<div class="strategyMenus">
			<div class="listAdd">
				<wj-Button type="save" @click="syslogAdd">
					<i class="wj-icon-tianjia"></i>
					新增配置
				</wj-Button>
			</div>
			<div class="strategyMenusSearch">
				<el-input placeholder="请输关键字检索" type="text" v-model="searchValue"></el-input>
			</div>
			<div class="strategyMenusBut">
				<wj-Button type="save" @click="searchEvent">查询</wj-Button>
			</div>
		</div>
		<div class="strategyList">
			<div class="listContent">
				<el-table :data="tableData" style="width: 100%" :row-class-name="'tableRowClassName'">
					<el-table-column type="index" width="80" label="序号"> </el-table-column>
					<el-table-column prop="ipAddress" label="服务器IP" width="180"> </el-table-column>
					<el-table-column prop="port" label="端口" width="180"> </el-table-column>
					<el-table-column prop="syslogContent" label="发送类型"> </el-table-column>
					<el-table-column prop="status" label="启用状态" width="180">
						<template slot-scope="scope">
							<wj-Button type="reset" v-if="scope.row.status == 0">{{ "已禁用" }}</wj-Button>
							<wj-Button type="save" v-if="scope.row.status == 1">{{ "已启用" }}</wj-Button>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="180">
						<template slot-scope="scope">
							<el-link type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-link>
							<el-link type="primary" @click="handleDelete(scope.$index, scope.row)">删除</el-link>
							<el-link type="primary" v-if="scope.row.status == 0" @click="handleStartusing(scope.$index, scope.row)">启用</el-link>
							<el-link type="primary" v-if="scope.row.status == 1" @click="handleForbidden(scope.$index, scope.row)">禁用</el-link>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<div class="strategyPage">
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[9]"
				:page-size="pageSize"
				layout="total, prev, pager, next, jumper"
				:total="total"
			>
			</el-pagination>
		</div>
		<!-- 自定义alertBox弹框——详情 -->
		<AlertBox :alertBoxVisible="alertBoxIssueVisible">
			<div class="contentBox contentBoxDetailsSyslog_class">
				<div class="contentBox_header">
					<p>编辑SYSLOG</p>
					<i class="wj-icon-guanbi" @click="alertBoxFormclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="infoRow_form">
						<span>服务器IP<b style="color:rgb(248, 4, 4);">*</b></span>
						<div class="form-item">
							<el-input v-model="syslogEdit.syslogIp" placeholder="请输入服务器IP" v-validate="'required|ipAddr'"></el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>服务器端口<b style="color:rgb(248, 4, 4);">*</b></span>
						<div class="form-item">
							<el-input v-model="syslogEdit.syslogPort" placeholder="请输入服务器端口" v-validate="'required|port'"></el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>发送类型</span>
						<div class="form-item">
							<!-- <el-checkbox v-model="syslogEdit.syslogTypeDoor">门状态切换</el-checkbox> -->
							<el-checkbox v-model="syslogEdit.syslogTypeWarning">告警日志</el-checkbox>
							<el-checkbox v-model="syslogEdit.syslogTypeAudit">审计日志</el-checkbox>
						</div>
					</div>
					<div class="infoRow_form">
						<span>是否启用</span>
						<div class="form-item">
							<el-switch v-model="syslogEdit.isState" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
						</div>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" v-checksubmit="{ submitEvent: handleEditConfirm, cls: 'contentBoxDetailsSyslog_class' }">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
		<!-- 自定义alertBox弹框——新增 -->
		<AlertBox :alertBoxVisible="alertBoxAddVisible">
			<div class="contentBox contentBoxAddSyslog_class">
				<div class="contentBox_header">
					<p>新增SYSLOG</p>
					<i class="wj-icon-guanbi" @click="alertBoxAddclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="infoRow_form">
						<span>服务器IP<b style="color:rgb(248, 4, 4);">*</b></span>
						<div class="form-item">
							<el-input v-model="syslogAddData.syslogIp" placeholder="请输入服务器IP" v-validate="'required|ipAddr'"></el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>服务器端口<b style="color:rgb(248, 4, 4);">*</b></span>
						<div class="form-item">
							<el-input v-model="syslogAddData.syslogPort" placeholder="请输入服务器端口" v-validate="'required|port'"></el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>发送类型</span>
						<div class="form-item">
							<!-- <el-checkbox v-model="syslogAddData.syslogTypeDoor">门状态切换</el-checkbox> -->
							<el-checkbox v-model="syslogAddData.syslogTypeWarning">告警日志</el-checkbox>
							<el-checkbox v-model="syslogAddData.syslogTypeAudit">审计日志</el-checkbox>
						</div>
					</div>
					<div class="infoRow_form">
						<span>是否启用</span>
						<div class="form-item">
							<el-switch v-model="syslogAddData.isState" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
						</div>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" v-checksubmit="{ submitEvent: syslogAddConfirm, cls: 'contentBoxAddSyslog_class' }">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
	</div>
</template>
<script>
import { syslog_all, syslog_add, syslog_delete, syslog_startusing, syslog_forbidden, syslog_update } from "@/utils/request/api";
export default {
	name: "SyslogIndex",
	data() {
		return {
			// 搜索
			searchValue: "",
			// 分页当前页码
			currentPage: 1,
			// 总页码
			total: 0,
			// 每页条数
			pageSize: 10,
			// 分页初始化页码
			pageNum: 1,
			// 表格数据
			tableData: [
				// {
				// 	syslogIP: "1.1.1.1",
				// 	syslogPort: "514",
				// 	syslogType: "审计日志，告警日志，。。。",
				// },
				// {
				// 	syslogIP: "1.1.1.1",
				// 	syslogPort: "514",
				// 	syslogType: "审计日志，告警日志，。。。",
				// },
				// {
				// 	syslogIP: "1.1.1.1",
				// 	syslogPort: "514",
				// 	syslogType: "审计日志，告警日志，。。。",
				// },
				// {
				// 	syslogIP: "1.1.1.1",
				// 	syslogPort: "514",
				// 	syslogType: "审计日志，告警日志，。。。",
				// },
				// {
				// 	syslogIP: "1.1.1.1",
				// 	syslogPort: "514",
				// 	syslogType: "审计日志，告警日志，。。。",
				// },
			],
			// 自定义弹窗控制——详情
			alertBoxIssueVisible: false,
			// 自定义弹窗控制——新增
			alertBoxAddVisible: false,
			// syslog编辑数据
			syslogEdit: {
				id: "",
				syslogIp: "",
				syslogPort: "",
				syslogTypeDoor: false,
				syslogTypeWarning: false,
				syslogTypeAudit: false,
				isState: false,
			},
			// syslog新增数据
			syslogAddData: {
				syslogIp: "",
				syslogPort: "",
				syslogTypeDoor: false,
				syslogTypeWarning: false,
				syslogTypeAudit: false,
				isState: false,
			},
		};
	},
	created() {},
	mounted() {
		this.getAllSyslog(this.pageNum, this.pageSize);
	},
	methods: {
		// 搜索
		searchEvent() {
			console.log(this.searchValue);
			this.currentPage = 1;
			this.total = 0;
			this.pageSize = 10;
			this.pageNum = 1;
			this.getSearchSyslog(this.pageNum, this.pageSize, this.searchValue);
		},
		// 分页组件事件
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			if (this.searchValue != "") {
				this.getSearchSyslog(val, this.pageSize, this.searchValue);
			} else {
				this.getAllSyslog(val, this.pageSize);
			}
		},
		// 新增
		syslogAdd() {
			this.alertBoxAddVisible = true;
		},
		// 初始化新增表单
		initSyslogAddForm() {
			this.currentPage = 1;
			this.total = 0;
			this.pageSize = 10;
			this.pageNum = 1;
			this.syslogAddData = {
				syslogIp: "",
				syslogPort: "",
				syslogTypeDoor: false,
				syslogTypeWarning: false,
				syslogTypeAudit: false,
				isState: false,
			};
		},
		// 新增-确定
		syslogAddConfirm() {
			syslog_add({
				ipAddress: this.syslogAddData.syslogIp,
				port: this.syslogAddData.syslogPort,
				doorState: this.transitionNumber(this.syslogAddData.syslogTypeDoor),
				warningState: this.transitionNumber(this.syslogAddData.syslogTypeWarning),
				auditState: this.transitionNumber(this.syslogAddData.syslogTypeAudit),
				status: this.transitionNumber(this.syslogAddData.isState),
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("syslog新增成功！");
					this.alertBoxAddVisible = false;
					this.initSyslogAddForm();
					this.getAllSyslog(this.pageNum, this.pageSize);
				} else {
					this.$msg.error("syslog修新增失败！");
				}
			});
		},
		// 编辑
		handleEdit(index, row) {
			console.log(index, row);
			this.alertBoxIssueVisible = true;
			this.syslogEdit.id = row.id;
			this.syslogEdit.syslogIp = row.ipAddress;
			this.syslogEdit.syslogPort = row.port;
			this.syslogEdit.syslogTypeDoor = this.transitionBoolean(row.doorState);
			this.syslogEdit.syslogTypeWarning = this.transitionBoolean(row.warningState);
			this.syslogEdit.syslogTypeAudit = this.transitionBoolean(row.auditState);
			this.syslogEdit.isState = this.transitionBoolean(row.status);
		},
		// 编辑-确定
		handleEditConfirm() {
			syslog_update({
				id: this.syslogEdit.id,
				ipAddress: this.syslogEdit.syslogIp,
				port: this.syslogEdit.syslogPort,
				doorState: this.transitionNumber(this.syslogEdit.syslogTypeDoor),
				warningState: this.transitionNumber(this.syslogEdit.syslogTypeWarning),
				auditState: this.transitionNumber(this.syslogEdit.syslogTypeAudit),
				status: this.transitionNumber(this.syslogEdit.isState),
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("syslog修改成功！");
					this.alertBoxIssueVisible = false;
					this.getAllSyslog(this.pageNum, this.pageSize);
				} else {
					this.$msg.error("syslog修改失败！");
				}
			});
		},
		// number转boolean
		transitionBoolean(value) {
			var bool;
			if (value != null) {
				if (value == 0) {
					bool = false;
				} else if (value == 1) {
					bool = true;
				}
			} else {
				bool = false;
			}
			return bool;
		},
		// boolean转number
		transitionNumber(value) {
			var number;
			if (value == false) {
				number = 0;
			} else if (value == true) {
				number = 1;
			}

			return number;
		},
		// 删除
		handleDelete(index, row) {
			console.log(index, row);
			syslog_delete({
				id: row.id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("syslog删除成功！");
					this.getAllSyslog(this.pageNum, this.pageSize);
				} else {
					this.$msg.error("syslog删除失败！");
				}
			});
		},
		// 启用
		handleStartusing(index, row) {
			console.log(index, row);
			syslog_startusing({
				id: row.id,
				status: 1,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("syslog启用成功！");
					this.getAllSyslog(this.pageNum, this.pageSize);
				} else {
					this.$msg.error("syslog启用失败！");
				}
			});
		},
		// 禁用
		handleForbidden(index, row) {
			console.log(index, row);
			syslog_forbidden({
				id: row.id,
				status: 0,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("syslog禁用成功！");
					this.getAllSyslog(this.pageNum, this.pageSize);
				} else {
					this.$msg.error("syslog禁用失败！");
				}
			});
		},
		// alertBox——详情 关闭
		alertBoxFormclose() {
			this.alertBoxIssueVisible = false;
		},
		// alertBox——新增 关闭
		alertBoxAddclose() {
			this.alertBoxAddVisible = false;
			this.initSyslogAddForm();
		},
		// 查询所有syslog
		getAllSyslog(page, size) {
			syslog_all({
				page: page,
				size: size,
			}).then((res) => {
				if (res.code == 200) {
					this.tableData = res.data.result;
					this.total = res.data.total;
				} else {
					this.$msg.error("syslog列表获取失败！");
				}
			});
		},
		// 搜索syslog
		getSearchSyslog(page, size, value) {
			syslog_all({
				page: page,
				size: size,
				keyword: value,
			}).then((res) => {
				console.log(res);
				this.tableData = res.data.result;
				this.total = res.data.total;
			});
		},
	},
};
</script>
<style lang="less" scoped>
.syslogIndexContent {
	width: 100%;
	height: 100%;
	padding: 12px 20px;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	.strategyMenus {
		width: 100%;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.listAdd {
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			[class*="wj-button-"] {
				font-size: 14px;
				padding: 12px 18px;
			}
		}
		.strategyMenusBut {
			width: 5%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			[class*="wj-button-"] {
				font-size: 14px;
				padding: 12px 18px;
				margin: 0 12px;
			}
		}
		.strategyMenusSearch {
			width: 15%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			/deep/ .el-input {
				font-size: 16px;
			}
		}
	}
	.strategyList {
		width: 100%;
		height: calc(100% - 48px - 48px);
		padding: 12px 0;
		box-sizing: border-box;

		.listContent {
			width: 100%;
			height: 100%;

			/deep/ .el-table {
				border-left: 1px solid #ebeef5;
				border-right: 1px solid #ebeef5;
				border-top: 1px solid #ebeef5;
			}
			/deep/ .el-link {
				margin: 0 12px 0 0;
			}
			/deep/ .el-table th.el-table__cell {
				background: #ebeef5;
				font-size: 15px;
			}
			[class*="wj-button-"] {
				font-size: 14px;
				padding: 8px 18px;
			}
		}
	}
	.strategyPage {
		width: 100%;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
}
</style>
